<template>
  <div class="related-resources">
    <div class="tabs">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="{ active: currentTab === tab }"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>
    </div>
    <!-- 资源列表 -->
    <div class="resource-list">
      <div class="item-1">
        <div
          v-for="item in currentResources"
          :key="item.title + item.date"
          class="resource-item"
        >
          <span class="resource-type">[{{ item.type }}]</span>
          <span class="resource-title">{{ item.title }}</span>
          <span class="resource-date">{{ item.date }}</span>
        </div>
      </div>
      <div class="item-2">
        <div
          v-for="item in currentResources"
          :key="item.title + item.date"
          class="resource-item"
        >
          <span class="resource-type">[{{ item.type }}]</span>
          <span class="resource-title">{{ item.title }}</span>
          <span class="resource-date">{{ item.date }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: "报刊文章", // 默认选中的标签
      tabs: [
        "报刊文章",
        "图书",
        "研究报告",
        "资讯动态",
        "法规文件",
        "论文",
        "视频",
      ], // 所有标签
      // 模拟资源数据（可根据实际接口返回调整）
      resources: [
        {
          type: "报刊",
          title: '"无人作战集群"瞄准未来战场 "东风-5C"打击范zxssxxsxsxsxsxxsxssx',
          date: "2025-8-22",
        },
        {
          type: "报刊",
          title: '一套敌机"催生"的八路军"兵书"',
          date: "2025-8-22",
        },
        {
          type: "报刊",
          title: "九三阅兵, 新一代武器装备震撼亮相",
          date: "2025-8-22",
        },
        {
          type: "报刊",
          title: '"确保相互侦察":天基情报侦察对美苏战略稳定的...',
          date: "2025-8-22",
        },
        {
          type: "报刊",
          title: "践行军事治理理念 推进政治整训持续走深落实",
          date: "2025-8-22",
        },
      ],
    };
  },
  computed: {
    // 根据当前标签过滤资源
    currentResources() {
      // 这里简化逻辑，实际可根据“tab类型”与“资源type”精准匹配
      return this.resources.filter((item) => {
        return this.currentTab === "报刊文章" ? item.type === "报刊" : false;
        // 若需支持其他标签，可扩展判断逻辑，如：
        // return item.type.toLowerCase() === this.currentTab.toLowerCase().replace("文章", "");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.resource-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;

  .resource-type {
    margin-right: 8px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
  }

  .resource-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
      cursor: pointer;
    &:hover {
      color: #327dff;
    }
  }

  .resource-date {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    margin-left: 33px;
  }
}
.related-resources {
  width: 100%;
  box-sizing: border-box;

  h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
  }

  .tabs {
    display: flex;
    margin-bottom: 12px;
    border-bottom: 2px solid #e5e5e5;

    button {
      padding: 10px 16px;
      margin-right: 8px;
      background: #ffffff;
      border-radius: 4px 4px 0px 0px;
      cursor: pointer;
      border: none;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #999999;
      &.active {
        background: #327dff !important;
        color: #ffffff;
      }
      &:hover {
        background: #eef4ff;
      }
    }
  }

  .resource-list {
    display: flex;
    .item-1 {
      flex: 1;
      margin-right: 63px;
    }
    .item-2 {
      flex: 1;
    }
  }
}
</style>